<template>
  <div class="goods-add">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
      <el-step title="步骤 3"></el-step>
      <el-step title="步骤 4"></el-step>
      <el-step title="步骤 5"></el-step>
    </el-steps>

    <!-- v-model就是用来设置哪个tab栏处于激活状态，后面的值是el-tab-pane组件中的name属性 -->
    <el-tabs v-model="activeName" @tab-click="handleClick" tab-position="left">
      <el-tab-pane label="基本信息" name="first">基本信息</el-tab-pane>
      <el-tab-pane label="商品参数" name="second">商品参数</el-tab-pane>
      <el-tab-pane label="商品属性" name="third">商品属性</el-tab-pane>
      <el-tab-pane label="商品图片" name="fourth">
        <!--
          action表示上传图片服务器的位置
          在上传组件的内部，封装了一个自己的ajax，它发请求的时候不会经过axios去发，所以axios的请求拦截器就无效了，那token自然就设置不到请求头里面去了
          通过headers属性设置请求头对象
           -->
        <el-upload
          action="http://localhost:8888/api/private/v1/upload"
          :headers="headerObj"
          :file-list="fileList"
          :before-upload="handleBeforeUpload"
          :on-preview="handlePreview"
          :on-success="handleSuccess"
          :on-remove="handleRemove"
          list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-tab-pane>
      <el-tab-pane label="商品内容" name="fifth">商品内容</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data () {
    return {
      active: 0, // active是一个索引值，表示当前哪个步骤处于激活状态
      activeName: 'first',
      // 请求头对象
      headerObj: {
        Authorization: localStorage.getItem('mytoken')
      },
      fileList: [
        { name: '狗.png', url: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2300875363,445064071&fm=5' }
      ]
    }
  },
  methods: {
    handleClick (tab, event) {
      // 通过点击时tab的索引，将它赋值给步骤条中控制激活的属性，就能够实现联动了
      this.active = parseInt(tab.index)
    },
    // 点击移除时执行的方法
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    // 图片上传成功时执行的方法
    handleSuccess (response, file, fileList) {
      this.$message.success(response.meta.msg)
    },
    // 点击图片预览时执行的方法
    handlePreview (file) {
      console.log(file)
    },
    // 图片上传之前执行的方法
    handleBeforeUpload (file) {
      console.log('file: ', file)
      if (file.size > 61440) {
        this.$message.error('图片不能大于60kb')
        return false
      }
    }
  }
}
</script>
